<template>
  <Drawer
      :title="title"
      v-model="show"
      width="420"
      :mask-closable="false"
      :styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">
    <Form ref="validForm" :model="formData" :rules="ruleValidate">
      <FormItem label="一级分类名称" label-position="top" v-if="row.pid != null">
        <Input placeholder="请输入一级分类名称" :modelValue="formData.parentName" readonly/>
      </FormItem>

      <FormItem label="资源分类名" label-position="top" prop="name" :error="error.name">
        <Input v-model="formData.name" placeholder="请输入资源分类名"/>
      </FormItem>

      <FormItem label="状态" label-position="top" :error="error.state">
        <Switch size="large" v-model="formData.state">
          <template #open>
            <span>启用</span>
          </template>
          <template #close>
            <span>禁用</span>
          </template>
        </Switch>
      </FormItem>
    </Form>

    <div class="demo-drawer-footer">
      <Button style="margin-right: 8px" @click="show = false">关闭</Button>
      <Button type="primary" @click="handleForm">保存</Button>
    </div>
  </Drawer>
</template>

<script setup>
import {ref, computed, reactive} from 'vue'
import Tips from '@/message/index.js' ;
import RSS from "@/api/rssIndex.js" ;

const {modelValue, row, title} = defineProps({
  modelValue: {
    type: Boolean, required: true,
  },
  row: {
    type: Object, required: true,
  },
  title: String,
})

const emits = defineEmits(["update:model-value", "refresh-type"]);
// 控制抽屉， 定义一个计算属性
const show = computed({
  get() {
    return modelValue;
  },
  set(val) {
    emits('update:model-value', val);
  }
});

// 定义表单数据
const formData = ref(row);

const ruleValidate = reactive({
  name: [
    {required: true, message: "资源分类名称不允许为空", trigger: 'blur'},
    {type: "string", max: 50, message: "资源分类名称过长", trigger: 'blur'},
  ]
})

const validForm = ref(null); // 定义一个变量，指向 form表单组件

const error = ref({}) // 存储 后端服务器校验失败的错误信息 

function handleForm() {
  error.value = {};
  validForm.value.validate(valid => {
    if (valid) {
      if (row.id == null) {
        handleSave();
      } else {
        handleUpdate();
      }
    }
  })
}

// 保存数据
function handleSave() {
  RSS.saveResourceType({name: formData.value.name, state: formData.value.state, pid: row.pid}).then(ret => {
    if (ret.status) {
      Tips.success("保存成功");
      show.value = false;
      emits("refresh-type") ;
    } else if (ret.code === 30000) {
      error.value = ret.error;
    }
  })
}

// 修改数据
function handleUpdate() {
  RSS.modifyResourceType({name: formData.value.name, state: formData.value.state, pid: row.pid, id: row.id}).then(ret => {
    if (ret.status) {
      Tips.success("修改成功");
      show.value = false;
      emits("refresh-type") ;
    } else if (ret.code === 30000) {
      error.value = ret.error;
    }
  })
}

</script>

<style scoped>
.icon {
  vertical-align: middle;
  margin: 0 3px;;
}

.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>